<template>
  <view class="goods_list">
    <!-- 搜索框的位置 -->
    <UgoSearch></UgoSearch>
    <view>
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        active-color="#ff2d4a"
        bar-width="150"
        @change="change"
      ></u-tabs>
      <view v-if="current === 0">
        <view class="goods">
          <navigator
            v-for="item in goods"
            :key="item.goods_id"
            :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
          >
            <view class="goods_image">
              <u-image
                mode="widthFix"
                height="190"
                :src="
                  item.goods_small_logo ||
                  'https://img2.baidu.com/it/u=1852786483,3450763574&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=520'
                "
              ></u-image>
            </view>
            <view class="goods_content">
              <view class="goods_name u-line-2">
                {{ item.goods_name }}
              </view>
              <view class="goods_price"> ￥{{ item.goods_price }} </view>
            </view>
          </navigator>
        </view>
      </view>
      <view v-if="current === 1">销量内容</view>
      <view v-if="current === 2">价格内容</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      goods: [], // 商品列表
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
    };
  },
  // 页面开始加载 也可以获取到 url的参数
  onLoad(options) {
    // console.log(options);
    // 定义一个全局变量-接口的参数  为什么要定义成全局变量 - 方便获取和方便修改
    this.params = {
      query: "",
      cid: "",
      pagenum: 1,
      pagesize: 10,
    };

    // 判断一下  如果 options.cid  有值   使用cid 获取商品列表数据
    if (options.cid) {
      this.params.cid = options.cid;
    }
    // 判断一下  如果 options.query 有值  使用 query获取商品列表数据
    if (options.query) {
      this.params.query = options.query;
    }
    // 获取商品列表数据
    this.getGoodsList();
  },
  // 页面滚动到底部的事件
  onReachBottom() {
    // console.log("onReachBottom");
    if (this.goods.length < this.total) {
      // 表示还有数据
      this.params.pagenum++;
      this.getGoodsList();
    } else {
      // 没有数据了
      uni.showToast({
        title: "没有数据啦",
        duration: 2000,
        icon: "none",
      });
    }
  },
  //下拉刷新
  async onPullDownRefresh() {
    // console.log("下拉刷新");
    // 重置数组
    this.goods = [];
    // 重置页码
    this.params.pagenum = 1;
    // 发送新的请求
    await this.getGoodsList();
    // 必须要等待上面的请求结束 才 停止加载中
    uni.stopPullDownRefresh();
  },

  methods: {
    change(index) {
      // console.log(index);
      this.current = index;
    },
    // 获取商品列表数据
    async getGoodsList() {
      const res = await this.$u.get("/goods/search", this.params);
      // console.log(res);
      // 数组的合并
      this.goods = [...this.goods, ...res.message.goods];
      // 全局变量  总条数
      this.total = res.message.total;
    },
  },
};
</script>

<style lang="scss">
.goods {
  navigator {
    display: flex;
    .goods_image {
      flex: 1;
    }
    .goods_content {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .goods_price {
        color: #ff2d4a;
      }
    }
  }
}
</style>